<template>
  <div class="date-itempickbar">
    <div class="date-itempicktip" @click="cancelClick" />
    <div class="date-toptipbar">
      <button class="date-cancelbtn" @click="cancelClick">取消</button>
      <div class="date-title">
        <div
          class="date-toptabbar date-tableftborder"
          :style="tabIndex==0?'background-color:#58abce;color:white;':''"
          @click="swichClick(0)"
        >年月日</div>
        <div
          class="date-toptabbar date-tabrightborder"
          :style="tabIndex==1?'background-color:#58abce;color:white;':''"
          @click="swichClick(1)"
        >时分钟</div>
      </div>
      <button class="date-confirmlbtn" @click="confirmClick">确定</button>
    </div>
    <van-datetime-picker
      v-if="tabIndex==0"
      class="date-itempick"
      type="date"
      :show-toolbar="false"
      v-model="currentDate"
      :max-date="maxDate"
      :min-date="minDate"
      @change="changeClick"
    />
    <van-datetime-picker
      v-else
      class="date-itempick"
      type="time"
      :show-toolbar="false"
      v-model="currentDate"
      :max-hour="maxHour"
      :max-minute="maxMinute"
      @change="changeClick"
    />
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  props: {
    title: {
      type: String,
      default: "享停车"
    },

    startTime: {
      type: String,
      default: api.formatData(new Date(), "time", "yyyy-MM-dd HH:mm:ss")
    }

  },

  data() {
    return {
      currentDate: new Date(),
      maxDate: new Date(),
      minDate: new Date(Date.parse(new Date) - 30 * 24 * 60 * 60 * 1000),
      tabIndex: 1,
      maxHour: '',
      maxMinute: '',
      tempDateTime: '',
    }
  },

  created() {
    if (this.tabIndex == 1) {
      this.currentDate = api.formatData(new Date(), "time", 'HH:mm');
      let isToday = this.isToday(this.substrDate(this.startTime));
      this.maxHour = isToday ? new Date().getHours() : '23';
      this.maxMinute = isToday ? new Date().getMinutes() : '59';
    }
  },

  methods: {
    //  确定按钮
    confirmClick() {
      if (!this.tempDateTime) { // picker没滚动选择值
        if (this.tabIndex == 0) {
          this.tempDateTime = api.formatData(new Date(), "time", 'yyyy-MM-dd');
        } else {
          this.tempDateTime = api.formatData(new Date(), "time", 'HH:mm');
        }
      }
      let timeValue = '';
      if (this.tabIndex == 0) { // 年月日
        timeValue = this.tempDateTime + this.substrTime(this.startTime, 3) + ':00';
      } else { // 小时分钟
        timeValue = this.substrDate(this.startTime) + " " + this.tempDateTime + ':00';
      }
      this.$emit("confirm", timeValue);
    },

    // picker变化时触发
    changeClick(picker) {
      if (this.tabIndex == 0) {
        this.tempDateTime = picker.getValues().join("-");
      } else {
        this.tempDateTime = picker.getValues().join(":");
      }
    },

    //  取消按钮
    cancelClick() {
      this.$emit("cancel");
    },

    swichClick(index) {
      this.tabIndex = index;
      this.currentDate = index == 0 ? new Date() : api.formatData(new Date(), "time", 'HH:mm');
      if (index == 1) {
        let isToday = this.isToday(this.substrDate(this.startTime));
        this.maxHour = isToday ? new Date().getHours() : '23';
        this.maxMinute = isToday ? new Date().getMinutes() : '59';
      }
    },

    // 日期是否是今天
    isToday(str) {
      return new Date().getTime() - new Date(str).getTime() < 86400000;
    },

    // 日期截取 eg:  2018-08-08
    substrDate(value) {
      if (!value) {
        return value;
      }
      if (value.indexOf(" ") > -1) {
        let end = value.indexOf(" ");
        return value.substring(0, end);
      } else {
        return value;
      }
    },

    // 日期截取 eg:   16:30
    substrTime(value, num) {
      if (!value) {
        return value;
      }
      if (value.indexOf(" ") > -1) {
        let start = value.indexOf(" ");
        return value.substring(start, num ? value.length - num : value.length);
      } else {
        return value;
      }
    },
  }
}
</script>

<style scoped>
.date-itempickbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

.date-itempicktip {
  flex: 1;
  background-color: rgba(0, 0, 0, 0.3);
}

.date-toptipbar {
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 0.88rem;
  line-height: 0.88rem;
  justify-content: space-between;
  background-color: white;
}

.date-title {
  max-width: 50%;
  font-weight: 500;
  font-size: 0.28rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.date-toptabbar {
  background-color: white;
  color: #58abce;
  height: 0.66rem;
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 0.02rem solid #58abce;
}

.date-tableftborder {
  border-top-left-radius: 0.15rem;
  border-bottom-left-radius: 0.15rem;
}

.date-tabrightborder {
  border-top-right-radius: 0.15rem;
  border-bottom-right-radius: 0.15rem;
}

.date-confirmlbtn {
  padding: 0 0.32rem;
  color: #1989fa;
  font-size: 0.28rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.date-cancelbtn {
  padding: 0 0.32rem;
  color: #1989fa;
  font-size: 0.28rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.date-marginright30 {
  margin-right: 0.3rem;
}

.date-itempick {
  font-size: 0.32rem;
}
</style>